<template>
	<view class="index">
		<!-- view:  块级容器（相当于HTML中的div标签） -->
		<!-- 1.0 搜索框 -->
		<view class="search">
			<view class="left">
				<input v-model="keyword" placeholder="关键字" type="text" class="inp" />
				<image @click="clearKeyWord" v-if="keyword.length !=0" src="../../static/icon-close.png" mode="widthFix" class="icon"></image>
			</view>
			<view class="right">
				<button @click="searchSongs"  class="btn">搜索</button>
			</view>
		</view>
		
		<!-- 通过布尔值做条件渲染 控制内容显示或隐藏 -->
		<view class="layout" v-if="isShow">
			<!-- 2.0 轮播图 -->
			<view class="banner" >
				<!-- 滑块容器 swiper组件 -->
				<swiper circular="true" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<!--滑块容器子组件 swiper-item -->
					<swiper-item v-for="item in banners">
						<view class="swiper-item">
							<image  :src="item.src"  mode="widthFix" class="img"></image>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
			
			<!-- 3.0 分类 -->
			<view class="nav" >
				<!-- 	 
					 <view @click="tabFn(0)"  :class="['opt',{active: index == 0}]">最新音乐</view>
					 <view @click="tabFn(1)"  :class="['opt',{active: index == 1}]">热门音乐</view>
					 <view @click="tabFn(2)"  :class="['opt',{active: index == 2}]">推荐音乐</view> 
				 -->
				 
				  <view 
				   v-for="(item,i ) in categorys"
				   @click="tabFn(i, item.text)"  
				   :class="['opt',{active: index == i}]">{{item.text}}</view>
			</view>
		</view>
		
		<!-- 4.0 歌曲列表 -->
		<view class="list">
			<!-- 3) 使用组件 -->
			<music-list  :arr="songs"></music-list>
		</view>
	</view>
</template>

<script>
	// 1） 导入自定义组件
	import musicListVue from '../../components/music-list/music-list.vue';
	
	// 导入网络请求API
	import {getCategoryList , getSongsList , searchSongsList} from "../../api/index.js";
	
	export default {
		// 2) 注册组件
		components: {
			musicList: musicListVue
		},
		
		data() {
			return {
				// 定义数组 记录轮播图数据
				//  []  数组
				//  {}  对象
				banners: [
					{src:"../../static/Y1.jpg",id: 1},
				],
				// 索引值
				index: 0,
				// 定义数组 记录歌曲列表
				songs: [
					// {name: "海阔天空",id: 1},
					// {name: "歌唱祖国",id: 2},
					// {name: "小幸运",id: 3},
					// {name: "西海情歌",id: 4},
					// {name: "征服",id: 5},
					// {name: "小跳蛙",id: 6},
					// {name: "凤凰传奇",id: 7},
				],
				// 数组 记录分类列表
				categorys: [],
				// 编写默认分类
				text: "最新音乐",
				// 定义变量 记录输入框输入的值
				keyword: "",
				// 布尔值 控制内容显示或隐藏
				isShow: true,
			}
		},
		methods: {
			// 恢复初始化界面
			clearKeyWord(){
				this.keyword = "";
				this.getSongs(this.text);
				this.isShow = true;
			},
			
			// 编写搜索歌曲的方法
			async searchSongs(){
				let keyword = this.keyword;
				console.log("关键字：",keyword)
				if(keyword) {
					// 调用方法获取歌曲
					await searchSongsList({keyword: keyword})
					.then(
						 content=> {
							 if(content.code == 200) {
								 // 设置布尔值为false 
								 this.isShow = false;
								 // 获取当前点击的分类的数据
								 this.songs = content.result;
								 // 判断当前环境是否支持本地存储
								 if(uni.setStorageSync){
								 	// 把歌曲列表转成字符串
								 	let str = JSON.stringify(content.result);
								 	// 把数据存储在本地空间
								 	uni.setStorageSync("SONGS",str);
								 }
							 }
							 else {
								 this.songs = [];
							 }
						 }
					)
					.catch(err=>console.log(err))
				}
				else {
					uni.showToast({
						title:"输入框不能为空~~",
						icon: "none"
					})
				}
			},
			
			
			// 编写方法 点击选项设置文本高亮
			tabFn(value,text){
				//设置索引值控制文本高亮
				this.index = value;
				// 通过调用api获取分类数据
				this.getSongs(text);
			},
			// 获取分类名称列表
			async getCategory(){
				await getCategoryList()
				.then(
					content=> {
						// console.log("检查1：",content)
						if(content.code == 200) {
							//给categorys分类数组赋值
							this.categorys = content.result;
							this.text =  content.result[0].text;//设置默认分类
						}
					}
				)
				.catch(err=>console.log(err))
			},
			
			// 获取分类歌曲列表
			async getSongs(text){
				await getSongsList({text: text})
				.then (
				    content=> {
						if(content.code == 200) {
							// 获取当前点击的分类的数据
							this.songs = content.result;
							// 判断当前环境是否支持本地存储
							if(uni.setStorageSync){
								// 把歌曲列表转成字符串
								let str = JSON.stringify(content.result);
								// 把数据存储在本地空间
								uni.setStorageSync("SONGS",str);
							}
						}
						else {
							this.songs = []
						}
					}
				)
				.catch(err=>console.log(err))
			},
		},
		onLoad() {
			// 初始化
			this.getCategory();
			this.getSongs(this.text);
		},
		onShow() {
			this.getSongs(this.text);
			this.index = 0;
		}
		
	}
</script>

<style>
	.nav {
		width: 100%;
		padding: 0px 15px;
		box-sizing: border-box;
		/* 弹性布局 */
		display: flex;
		background-color: #E4F9FF;
		align-items: center;
		flex-wrap: wrap;
	}
	.nav .opt {
		width: 33.33333%;
		height: 60px;
		line-height: 60px;
		/* 文本水平居中 */
		text-align: center;
	}
	.nav .opt.active {
		color: #7FCD91;
		font-weight: bold;
	}
	
	.banner {
		padding: 10px 15px;
	}
	.banner swiper {
		height: 180px !important;
	}
	.banner swiper .img {
		width: 100%;
		border-radius: 10px;
	}
	
	
	
	
	/* 类名选择器 */
	.search {
		/* 宽度 */
		width: 100%;
		/* 内边距（上10px  左右15px  底部0px） */
		padding: 10px 15px 0px;
		/* 改变盒子大小计算方式  盒子依旧是宽度100% */
		box-sizing: border-box;
		/* 弹性盒子 （可以控制子元素的位置和尺寸） */
		display: flex;
	}
	.search .left {
		/* calc  动态计算属性值的意思 */
		width: calc(100% - 60px);
		/* 相对定位 */
		position: relative;
	}
	.search .left .icon {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10px;
		top: 14px;
	}
	.search .left .inp {
		width: 100%;
		/* 高度 */
		height: 46px;
		/* 边框 */
		border: 1px solid #7FCD91;
		/* 改变盒子大小计算方式  盒子依旧是宽度100% */
		box-sizing: border-box;
		/* 左侧内边距 */
		padding-left: 20px;
		/* 左上角圆角 */
		border-top-left-radius: 23px;
		/* 左下角圆角 */
		border-bottom-left-radius: 23px;
	}
	.search .right {
		/* 宽度 */
		width: 60px;
	}
	.search .right .btn {
		width: 60px;
		height: 46px;
		/* 行高 */
		line-height: 46px;
		/* 内边距 */
		padding: 0;
		/* 外边距 */
		margin: 0;
		/* 背景色 */
		background-color: #7FCD91;
		/* 圆角为0 */
		border-radius: 0;
		/* 字体为白色 */
		color: white;
		/* 右上角圆角 */
		border-top-right-radius: 23px;
		/* 右下角圆角 */
		border-bottom-right-radius: 23px;
	}
</style>
